<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>更换封面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/together.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/html.css"/>
		<style type="text/css">
			.container{
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #CDE0FF;
				margin: 10px 10px 10px 10px;
			}
			.container>div{
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			.huadong{
				height: 100%;
				overflow: hidden;
				margin: 0;
				padding: 0;
			}
			.huadong .hddiv{
				position: relative;
				display: flex;
				justify-content: flex-start;
				margin:0px auto;
			    border:0px;
			    padding:0px;
			    width: 100%;
			    height: auto;
			}
		</style>
	</head>

	<body>
		
			<header class="mui-bar mui-bar-nav m_barC">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			    <h1 class="mui-title">更换封面</h1>
			</header>
			<div class="mui-content">
				<div class="huadong" id="huadong">
					<div class="hddiv" id="hdmian">
						<!--
                        	作者：592176224@qq.com
                        	时间：2018-12-17
                        	描述：
					    <div class="container" id="main">
					    	
					    </div>
                        -->
				    </div>
			    </div>
			</div>
		
			
		
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 let lf = 0;
			 let startPos = {};
			 let endPos = {};
			window.onload = function (){
				mui.init();
				//var main = document.getElementById("main");
				var hdmian = document.getElementById("hdmian");
				//main.style.width = w-20 + "px";
				//main.style.height = w*z + "px";
				hdmian.style.width = w*6 + "px";
				
				let f1 = html.f1("小幸运","百味苦","改变");
				let div = document.createElement('div');
				div.style.width= w-20 + "px";
				div.style.height= ((w-20)*z)+'px';
				div.classList.add("container");
				div.innerHTML = f1;
				hdmian.append(div);
				/*
				let f2 = html.f2("小幸运","百味苦","改变");
				let fdiv2 = document.createElement('div');
				fdiv2.innerHTML = f2;
				main.append(fdiv2);*/
				hdmian.addEventListener('touchstart',start,false);
			}
			
      
        //滑动开始
       
       function start(event){
            let touch = event.targetTouches[0];    
            console.log(touch);
            startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值
            isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
            lf = this.offsetLeft;
            this.addEventListener('touchmove',move,false);
            this.addEventListener('touchend',end,false);
        }
       
        //移动
        function move(event){
            //当屏幕有多个touch或者页面被缩放过，就不执行move操作
            if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
            let touch = event.targetTouches[0];
            endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
            isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;    //isScrolling为1时，表示纵向滑动，0为横向滑动
            if(isScrolling === 0){
                event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
                console.log("移动",endPos.x);
                console.log("lf", lf);
                this.style.left = (lf + (endPos.x/2)) +"px";
            }
        }
        //滑动释放
        function end(event){
            let duration = +new Date - startPos.time;    //滑动的持续时间
            if(isScrolling === 0){    //当为水平滚动时
                if(Number(duration) > 10){     
                    //判断是左移还是右移，当偏移量大于10时执行
                    if(endPos.x > 10){
                    	console.log("大于10")
                       // if(this.index !== 0) this.index -= 1;
                    }else if(endPos.x < -10){
                       // if(this.index !== this.icon.length-1) this.index += 1;
                       console.log("小于10")
                    }
                }
                //this.style.left = -this.index*600 + 'px';
            }
            //解绑事件
            this.removeEventListener('touchmove',move,false);
            this.removeEventListener('touchend',end,false);
        }
    

        
        
		</script>
			
			
		
	</body>

</html>